<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎光临学生成绩管理系统</div>
    <div class="dashboard-text">姓名:{{ name }}</div>
    <!-- <div class="dashboard-text">roles:<span v-for="role in roles" :key="role">{{ role }}</span></div> -->
    <vue-baberrage
      :isShow="barrageIsShow"
      :barrageList="barrageList"
      :maxWordCount="maxWordCount"
      :throttleGap="throttleGap"
      :loop="barrageLoop"
      :boxHeight="boxHeight"
      :messageHeight="messageHeight"
      :lanesCount="lanesCount"
    >
    </vue-baberrage>
  </div>
</template>

<script>
import { vueBaberrage, MESSAGE_TYPE } from "vue-baberrage";
import { mapGetters } from "vuex";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name", "roles"]),
  },
  data() {
    return {
      barrageIsShow: true,
      // 消息框全顯示的高度
      messageHeight: 30,
      boxHeight: 700,
      barrageLoop: true,
      maxWordCount: 120,
      throttleGap: 5000,
      barrageList: [],
      lanesCount: 4,
      msg: "张豪太帅了吧 好喜欢呢",
    };
  },
  mounted() {
    this.addToList();
  },
  methods: {
    addToList() {
      let list = [
        {
          id: 1,
          avatar:
            "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/10/14/cfcfc022-999b-4e52-bca9-32531e1482ec1.jpg",
          msg: "欢迎光临",
          time: Math.random() * 9 + 3,
          barrageStyle: "red",
        },
        {
          id: 2,
          avatar:
            "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/10/14/61ddb067-4e27-4228-ad4f-cb90541011912.jpg",
          msg: "哈喽?",
          time: Math.random() * 9 + 4,
          barrageStyle: "green",
        },
        {
          id: 3,
          avatar:
            "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/10/14/599ac5be-8daf-4733-af46-d82284c55e313.jpg",
          msg: "感谢亲的支持和惠顾，期待下次能够能您提供更优质的服务！",
          time: Math.random() * 9 + 5,
          barrageStyle: "normal",
        },
        {
          id: 4,
          avatar:
            "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/10/14/83b79bf9-7747-489c-8948-fcee3652ca514.jpg",
          msg: "喜欢hmj",
          time: Math.random() * 9 + 3,
          barrageStyle: "blue",
        },
        {
          id: 5,
          avatar:
            "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/10/14/48c208f2-3969-4aaa-857b-d2e3632d7cb15.jpg",
          msg: "不想读书",
          time: Math.random() * 9 + 4,
          barrageStyle: "red",
        },
        {
          id: 6,
          avatar:
            "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/10/14/69b21118-1783-4804-870f-d47fcc3d23c06.jpg",
          msg: "睡到自然醒",
          time: Math.random() * 9 + 1,
          barrageStyle: "normal",
        },
        {
          id: 7,
          avatar:
            "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/10/14/f6175c57-2b40-4977-81cc-8528fde2a0ad7.jpg",
          msg: "每天一个白日梦",
          time: Math.random() * 9 + 2,
          barrageStyle: "red",
        },
        {
          id: 8,
          avatar:
            "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/10/14/aa04bac5-45fd-4402-ab4e-8eebebb2106b8.jpg",
          msg: "我靠智商上清华",
          time: Math.random() * 9 + 3,
          barrageStyle: "normal",
        },
        {
          id: 9,
          avatar:
            "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/10/14/3b34e3f0-3a0c-4163-810d-44743c03f88c9.jpg",
          msg: "高处不胜寒",
          time: Math.random() * 9 + 4,
          barrageStyle: "red",
        },
        {
          id: 10,
          avatar:
            "https://zhanghao-edu.oss-cn-beijing.aliyuncs.com/2021/10/14/bb94f4c5-5c04-448c-89cc-f7e9561162fa10.jpg",
          msg: "黄茂峻哈哈哈",
          time: Math.random() * 9 + 0,
          barrageStyle: "yellow",
        },
      ];
      list.forEach((v) => {
        this.barrageList.push({
          id: v.id,
          avatar: v.avatar,
          msg: v.msg,
          time: v.time,
          type: MESSAGE_TYPE.NORMAL,
          barrageStyle: v.barrageStyle,
        });
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.barrages-drop {
  .blue {
    border-radius: 50px;
    background: #e6ff75;
    color: #fff;
  }

  .green {
    border-radius: 50px;
    background: #75ffcd;
    color: #fff;
  }
  .red {
    border-radius: 50px;
    background: #e68fba;
    color: #fff;
  }
  .yellow {
    border-radius: 50px;
    background: #dfc795;
    color: #fff;
  }
  .baberrage-stage {
    position: absolute;
    width: 100%;
    height: 512px;
    overflow: hidden;
    top: 0;
    margin-top: 130px;
    background: pink;
    font-size: 15px;
  }
}
</style>
